<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>百度一下,你就知道</title>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <link rel="shortcut icon" type="image/ico"/>
</head>

<body>
<!-- top start -->
<div>
    <div class="top">
        <a class="mnav">糯米</a>
        <a class="mnav">新闻</a>
        <a class="mnav">hao123</a>
        <a class="mnav">地图</a>
        <a class="mnav">视频</a>
        <a class="mnav">贴吧</a>
        <a target="_blank"
           class="lb">登录</a>
        <a class="lb">设置</a>
        <a class="bri">更多产品</a>
    </div>
</div>
<!-- top end -->
<!-- middle start -->
<div class="content">
    <div>
        <a target="_blank">
            <img src="https://www.baidu.com/img/bd_logo1.png?where=super
" alt="百度logo" title="百度logo" width="270" height="129"/>
        </a>
    </div>
    <div class="mid">
        <form>
            <input type="text" value="" class="search"/><input type="submit" value="百度一下" class="btn"/>
        </form>
    </div>
</div>
<!-- middle end -->
<!-- bottom start-->
<div class="bottom">
    <div class="ft">
        <div class="fttwo">
            <p>
                <a target="_blank">把百度设为首页</a>
                <a target="_blank">关于百度</a>
                <a target="_blank">About&nbsp;Baidu</a>
            </p>
            <br/>
            <p>&copy;2015&nbsp;Baidu
                <a target="_blank">使用百度前必读</a>
                <a target="_blank">意见反馈</a> 京ICP证030173号<i class="f-icon"></i>
            </p>
        </div>
    </div>
</div>
<!-- bottom end-->
</body>

</html>

<style>
    * {
        margin: 0;
        padding: 0;
        font-size: 12px;
    }

    /* top start
    */

    .top {
        float: right;
        margin-top: 20px;
        margin-right: 20px;
    }

    .mnav {
        float: left;
        color: #333;
        font-weight: bold;
        line-height: 24px;
        margin-left: 20px;
        font-size: 13px;
        text-decoration: underline;
    }

    .lb {
        float: left;
        color: #333;
        line-height: 24px;
        margin-left: 20px;
        font-size: 13px;
        text-decoration: underline;
    }

    .bri {
        width: 60px;
        height: 24px;
        float: left;
        color: white;
        background: #38f;
        line-height: 24px;
        font-size: 13px;
        text-align: center;
        overflow: hidden;
        border-bottom: 1px solid #38f;
        margin-left: 19px;
        margin-right: 2px;
        display: block;
    }

    .top a:hover {
        color: #4276C5;
    }

    a.bri:hover {
        color: #000;
    }

    /*top end
    */

    /*middle start*/

    .content {
        width: 100%;
        position: absolute;
        top: 120px;
        text-align: center;
    }

    .mid {
        width: 643px;
        margin: 0 auto;
    }

    .search {
        float: left;
        width: 539px;
        height: 32px;
        text-indent: 5px;
    }

    .btn {
        float: left;
        width: 100px;
        height: 36px;
        color: white;
        font-size: 15px;
        letter-spacing: 1px;
        background: #3385ff;
        border: 1px solid #2d78f4;
        /*  outline: medium;*/
        cursor: pointer;
    }

    /*middle end*/

    /*bottom start*/

    .bottom {
        width: 643px;
        margin: 0 auto;
    }

    .ft {
        float: left;
        position: absolute;
        bottom: 40px;
        padding-left: 120px;
    }

    .codewap {
        width: 60px;
        height: 60px;
        float: left;
    }

    .waptext {
        float: left;
        color: #999;
        line-height: 23px;
        margin: 8px 0 0 10px;
    }

    .waptext p b {
        color: #000;
    }

    .coderm {
        width: 60px;
        height: 60px;
        float: left;
        margin-left: 10px;
    }

    .fttwo {
        float: left;
        margin-left: 30px;
        text-align: center;
        margin-top: 10px;
    }

    .fttwo p {
        float: left;
        display: block;
    }

    .fttwo a {
        color: #333;
        display: inline-block;
        margin-left: 10px;
    }

    .f-icon {
        width: 18px;
        height: 20px;
        display: inline-block;
    }

    /*bottom end*/
</style>